<template>
    <div class="oiuy" :style="{'background':'url('+ (background)+')','height':height ? height : '50vh'}" v-if="skeleton ">
        <div class="content">
            <h1 style="font-weight: bolder;font-size: 2.5rem;  text-shadow: 5px 5px 5px #383636;">
              <slot name="default"></slot>
            </h1>
            <slot name="two"></slot>
        </div>
        <slot name="three"></slot>
    </div>
    <div v-else class="oiuy circle" :style="{'height':height ? height : '50vh'}" style="background: #e7e1e1">
       <div class=" circle" style="border-radius: 50%">
             <CircleLoading :outer="'8rem'" :inner="'4rem'"></CircleLoading>
       </div>
    </div>
</template>

<script>
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";

export default {
    name: "HeadImage",
    components: {CircleLoading},
    props:['background','height'],
    data(){
        return{
            skeleton:false,
        }
    },
    watch:{
        background(newValue,oldValue){
            if(newValue !== ""){
                setTimeout(()=>{
                    this.skeleton = true;
                },100)
            }
        }
    },
    mounted() {
        if(this.background !== ""){
            setTimeout(()=>{
                this.skeleton = true;
            },100)
        }
    }
}
</script>

<style scoped>
.oiuy{
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    background-position: 20% !important;
    background-repeat:no-repeat;
    background-size: cover !important;
    animation: back 0.5s ease-out 1 0s  forwards;
}
.oiuy .content {
    text-align: center;
    color: #f8f4f4;

}
.oiuy .content p{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    color: #efe3e6;
    font-size: 1.5rem;
}
.circle{
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(143, 142, 142, 0.2);
}
@keyframes back {
    0%{
      opacity: 0;
    }100%{
     opacity: 1;
    }

}
@media (min-width: 0) and (max-width: 600px) {
   h1{
     font-size: 2.1rem !important;
   }
    .content{
        width: 370px;
    }
}
</style>